<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>jQuery Paginator</title>
        <link href="css/styles.css" rel="stylesheet" media="all"/>
        <style type="text/css">
            #main { width: 600px; margin: 0 auto; }
            .paginator{ margin-bottom: 15px; }
        </style>
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="../jquery.paginator.3000.js"></script>
        <script type="text/javascript">
            // <!--
            $(document).bind('ready', function () {
                var page = /page=([^#&]*)/.exec(window.location.href);
                page = page ? page[1] : 400;

                $('#paginator1').paginator({
                    pagesTotal: 1024,
                    pagesSpan: 11,
                    pageCurrent: page,
                    baseUrl: 'index.html?page=%number%'
                });

                $('#paginator2').paginator({
                    pagesTotal: 1024,
                    pagesSpan: 11,
                    pageCurrent: page,
                    baseUrl: 'index.html?page=%number%',
                    returnOrder: true
                });

                $('#paginator3').paginator({
                    pagesTotal: 1024,
                    pagesSpan: 11,
                    pageCurrent: page,
                    baseUrl: 'index.html?page=%number%',
                    clickHandler: function (page) {
                        alert('Selected page ' + page);
                        return false;
                    },
                    returnOrder: true
                });

                $('#paginator4').paginator({
                    pagesTotal: 1024,
                    pagesSpan: 11,
                    pageCurrent: page,
                    baseUrl: 'index.html?page=%number%',
                    lang: {
                        next  : "Следующая",
                        last  : "Последняя",
                        prior : "Предыдущая",
                        first : "Первая",
                        arrowRight: String.fromCharCode(8594),
                        arrowLeft: String.fromCharCode(8592)
                    }
                });
            })
            // -->
        </script>
    </head>
    <body>
        <div id="main">
            <p>Example #1</p>
            <div class="paginator" id="paginator1"></div>

            <p>Example #2</p>
            <div class="paginator" id="paginator2"></div>

            <p>Example #3</p>
            <div class="paginator" id="paginator3"></div>

            <p>Example #4</p>
            <div class="paginator" id="paginator4"></div>
        </div>
    </body>
</html>